import {
  request
} from "../../request/index.js"
import regeneratorRuntime from '../../lib/runtime/runtime';
// pages/category/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 左侧的菜单数据
    leftMenuList: [],
    // 右侧的商品数据
    rightContent: [],
    // 被点击的左侧的菜单
    currentIndex: 0,
    // 右侧内容的滚动条距离顶部的距离
    scrollTop: 0
  },
  // 接口的返回数据
  Cates: [],

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    /*
    0 web中的本地存储和 小程序中的本地存储的区别
      0.1) 写代码的方式不一样了
          * web: localStorage.setItem("key", "value")  localStorage.getItem("key")
          * 小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key")
      0.2) 存的时候 有没有做类型转换
          * web: 不管存入的是什么类型的数据, 最终都会先调用以下toString(),把数据变成了字符串 再存入进去
          * 小程序: 不存在 类型转换的这个操作 存什么类型的数据进去,获取的就是什么数据 
    1 先判断一下本地存储中有没有旧的数据
      {time:Data.now(),data:[...]}
    2 没有旧数据 直接发送新情求
    3 有旧数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
    */

    // 1 获取本地存储中的数据 (小程序中也是存在本地存储 技术) 
    const Cates = wx.getStorageSync('cates');
    //判断       第一次判断的时候,肯定没有Cates的数据的
    if (!Cates) {
      // 不存在 发送请求获取数据
      this.getCates();
    } else {
      //有旧的数据 定义过期时间 10s 改成5minutes/分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        // 重新发送请求
        this.getCates();
      } else {
        // 1) 可以使用旧的数据 2) 全局变量就等于接口返回的请求数据 3) this相当于当前page的作用域
        // console.log("可以使用旧的数据")
        // 获取到了本地存储到的数据了
        /* 
          this.Cates表示page作用域下的数组
          Cates.time和Cates.data,表示onLoad作用域下变量/对象Cates下的两个属性
          参考:(wx.setStorageSync("cates",{time:Date.now(),data:this.Cates});)
        */
        this.Cates = Cates.data;
        // 构造左侧的大菜单数据 
        let leftMenuList = this.Cates.map(v => v.cat_name);
        // 构造右侧的商品数据 (首次加载category页面数据)
        let rightContent = this.Cates[0].children;
        this.setData({
          // Cates : res.message,
          // // 构造左侧的大数据
          // leftMenuList: res.message,
          // rightContent: res.message[0].children
          // rightContent: leftMenuList[0].children
          // rightContent: leftMenuList[0].children
          leftMenuList,
          rightContent
        })
      }
    }
    // this.getCates()
  },
  // 获取分类数据 
  // 方法一
  /*async getCates() {
    const {
      data: res
    } = await wx.p.request({
      method: "GET",
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    })
    console.log(res)
    // this 当前页面对象下面的数据,包含data配置对象下面的
    this.setData({
      // Cates : res.message,
      // 构造左侧的大数据
      leftMenuList: res.message,
      rightContent: res.message[0].children
      // rightContent: leftMenuList[0].children
      // rightContent: leftMenuList[0].children
    })
    // 不能直接打印转存数据的数组
    // console.log(this.leftMenuList)
    // console.log(this.rightContent)
  },*/

  //方法二
  /*getCates() {
    request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    })
      .then(res => {
        this.Cates=res.data.message;

        // 构造左侧的大菜单数据
        let leftMenuList=this.Cates.map(v=>v.cat_name);
        // 构造右侧的商品数据
        let rightContent=this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })
  },*/

  // 方法三 ?
  /*async getCates() {
    const {
      data: res
    } = await wx.p.request({
      method: "GET",
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
    })
    // 此处的res=res.data, res的data重新赋值给res
    console.log(res)
    // this 当前页面对象下面的数据,包含data配置对象下面的//如果是data{}配置项下面,就是this.setData{}
    this.Cates = res.message;
    // 把接口的数据存入到本地存储中 //
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });

    // 构造左侧的大菜单数据
    let leftMenuList = this.Cates.map(v => v.cat_name);
    // 构造右侧的商品数据
    let rightContent = this.Cates[0].children;
    this.setData({
      // Cates : res.message,
      // // 构造左侧的大数据
      // leftMenuList: res.message,
      // rightContent: res.message[0].children
      // rightContent: leftMenuList[0].children
      // rightContent: leftMenuList[0].children
      leftMenuList,
      rightContent
    })
    // 不能直接打印转存数据的数组
    // console.log(this.leftMenuList)
    // console.log(this.rightContent)
  },
*/

  // 方法四
  async getCates() {
    // 1 使用es7的async await来发送请求
    const res = await request({ url: "/categories" })
    // this 当前页面对象下面的数据,包含data配置对象下面的//如果是data{}配置项下面,就是this.setData{}
    /*
    1 this.Cates = res.data.message;
    2 success:(result)=>{
               resolve(result.data.message);     
            },
    */ 
    this.Cates = res;
    // 把接口的数据存入到本地存储中 //
    wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });
    /* 
    1 构造左侧的大菜单数据
    2 左侧大菜单数据,只取第一层数组的cat_name,就够了,按需取值
    3 this.Cates.map(v => v.cat_name) 表示获遍历所有message数组的cat_name属性
    4 名字
    */
    let leftMenuList = this.Cates.map(v => v.cat_name);
    /*
    1 构造右侧的商品数据
    2 默认遍历第一个message数组下的children元素开始Cates[0]
    3 但是点击其它左侧页面时,调用bindtap="handleItemTap",更改索引以及重新赋值给rightContent,let rightContent = this.Cates[index].children
    4 第一个数组元素
    */ 
    let rightContent = this.Cates[0].children;
    this.setData({
      // Cates : res.message,
      // // 构造左侧的大数据
      // leftMenuList: res.message,
      // rightContent: res.message[0].children
      // rightContent: leftMenuList[0].children
      // rightContent: leftMenuList[0].children
      leftMenuList,
      rightContent
    })
  },
  // 左菜单的点击事件
  // 方法一
  /*async handleItemTap(e){
    console.log(e)
    const {
      data: res
    } = await wx.p.request({
      method: "GET",
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',

    })
    console.log(res)
    
    // 1 获取被点击的标题的索引
    // 2 给data中的currentIndex赋值就可以了
    // 3 根据不同的索引来渲染右侧的商品内容
    
  // 因为获取的是e对象下的数子,所以使用{}
    const {index}=e.currentTarget.dataset;

    // let rightContent = this.leftMenuList[index]

    this.setData({
      currentIndex:index,
      rightContent:res.message[index].children
    })
  },*/

  //方法二 通过获取新的index,获取rightContent
  handleItemTap(e) {
    console.log(e)
    /* const {
      data: res
    } = await wx.p.request({
      method: "GET",
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',

    })
    console.log(res) */

    // 1 获取被点击的标题的索引
    // 2 给data中的currentIndex赋值就可以了
    // 3 根据不同的索引来渲染右侧的商品内容

    // 因为获取的是e对象下的数子,所以使用{}
    const { index } = e.currentTarget.dataset;

    // let rightContent = this.leftMenuList[index]
    let rightContent = this.Cates[index].children
    this.setData({
      currentIndex: index,
      rightContent,
      // 重新设置 右侧内容的scroll-view标签距离顶部的距离
      scrollTop: 0
    })
  },




  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})